<!-- 多语言处理页面 -->
<template>
    <div>
        <el-form>
            <el-row style="margin-top: 10px">
                <el-col :span="8">
                    <el-row>
                        <el-form-item label="AppId:">
                            <el-input v-model="filter.appId" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="密匙:">
                            <el-input v-model="filter.securityKey" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-row>
                </el-col>
                <el-col :span="12">
                    <el-row/>
                    <el-row style="margin-top: 20px">
                        <el-switch v-model="filter.translateType"
                                   inactive-text="基本翻译"
                                   active-text="代码多语言处理"
                                   style="margin-left: 20px"
                                   @change="changeRow">
                        </el-switch>
                        <el-switch v-model="filter.translateType2"
                                   inactive-text="web"
                                   active-text="android"
                                   style="margin-left: 20px">
                        </el-switch>
                        <el-button @click="clearAll" style="margin-left: 20px">
                            清空
                        </el-button>
                        <el-button type="primary" @click="translateClick" style="margin-left: 20px">
                            开始
                        </el-button>
                        <el-button @click="openTxt" style="margin-left: 20px">
                            打开代码文件
                        </el-button>
                    </el-row>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="margin-top: 10px">
            <el-col :span="6">
                <el-tag>中文简体</el-tag>
            </el-col>
            <el-col :span="6">
                <el-tag>中文繁体</el-tag>
            </el-col>
            <el-col :span="6">
                <el-tag>英文</el-tag>
            </el-col>
            <el-col :span="6">
                <el-tag>日文</el-tag>
            </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
            <el-col :span="6">
                <el-input
                        type="textarea"
                        :rows="relativeRow"
                        placeholder="请粘贴CN代码"
                        v-model="filter.langCN"
                        clearable>
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-input
                        type="textarea"
                        :rows="relativeRow"
                        v-model="langTW">
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-input
                        type="textarea"
                        :rows="relativeRow"
                        v-model="langEN">
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-input
                        type="textarea"
                        :rows="relativeRow"
                        v-model="langJA">
                </el-input>
            </el-col>
        </el-row>
    </div>
</template>

<script>

  import {apiDefaultErrorHandler} from "../../api/base";
  import translateApi from "../../api/operation/translate";
  import {deepCopy} from "../../utils";

  export default {
    name: "translate",

    data() {
      return {
        filter: {
          // appid
          appId: '20210305000715744',
          // SECURITY_KEY
          securityKey: '8dGb0SfqIVfCW2FbPhEkYF',
          // 翻译类型
          translateType: false,
          // 翻译类型（Android web）
          translateType2: true,
          // 中文
          langCN: '',
        },
        search: {},
        // 简繁英日
        langTW: '',
        langEN: '',
        langJA: '',
        relativeRow: 5
      };
    },

    methods: {
      // 清空数据
      clearAll() {
        this.filter.langCN = ''
        this.langTW = ''
        this.langEN = ''
        this.langJA = ''
      },
      changeRow() {
        if(this.filter.translateType) {
          this.relativeRow = 30;
        } else {
          this.relativeRow = 5;
        }
      },
      // 翻译点击事件
      translateClick() {
        if (this.filter.langCN === '') {
          this.$message({
            message: '请粘贴中文多语言代码',
            type: 'warning'
          });
        } else {
          this.translate()
        }
      },
      translate() {
        this.search = deepCopy(this.filter)
        translateApi.translate(this.search).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            this.$message('翻译成成成功啦啦啦啦!!');
            this.langEN = data.result.en
            this.langTW = data.result.tw
            this.langJA = data.result.ja
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        })
      },
      openTxt() {
        translateApi.openTxt().then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            this.$message('打开成功!');
          } else {
            this.$message('打开失败!');
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
          this.$message('打开失败!');
        })
      }
    }
  }
</script>

<style scoped>

</style>